import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { ProgressCircle, Space } from 'antd-mobile'
import { ShareSheet, Button } from 'react-vant';

const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];
export default function End() {
    let navigate = useNavigate()
    let [distance, setDistance] = useState(0)
    let time = sessionStorage.getItem('time')
    const [visible, setVisible] = useState(false)
    let AMap = window.AMap
    let getMap = () => {
        AMap.plugin('AMap.MoveAnimation', function () {
            let marker, lineArr = [[115.489, 38.815], [115.5, 38.815], [115.5, 38.81], [115.489, 38.81], [115.489, 38.815]];
            let arr = new Array();//经纬度坐标数组 
            arr.push(new AMap.LngLat(115.489, 38.815));
            arr.push(new AMap.LngLat(115.5, 38.815));
            arr.push(new AMap.LngLat(115.5, 38.81));
            arr.push(new AMap.LngLat(115.489, 38.81));
            arr.push(new AMap.LngLat(115.489, 38.815));
            setDistance(Math.round(AMap.GeometryUtil.distanceOfLine(arr)))

            let map = new AMap.Map("container", {
                resizeEnable: true,
                center: [115.489, 38.815],
                zoom: 17
            });

            marker = new AMap.Marker({
                map: map,
                position: [115.489, 38.815],
                icon: "/public/1.png",
                offset: new AMap.Pixel(-13, -26),
            });

            // 绘制轨迹
            let polyline = new AMap.Polyline({
                map: map,
                path: lineArr,
                showDir: true,
                strokeColor: "#28F",
                strokeWeight: 6,
            });

            var passedPolyline = new AMap.Polyline({
                map: map,
                strokeColor: "#AF5",  //线颜色
                strokeWeight: 6,      //线宽
            });


            marker.on('moving', function (e) {
                passedPolyline.setPath(e.passedPath);
                map.setCenter(e.target.getPosition(), true)
            });

            map.setFitView();


            document.getElementById('start').onclick = function () {
                marker.moveAlong(lineArr, {
                    // 每一段的时长
                    duration: 1000,//可根据实际采集时间间隔设置
                    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                    autoRotation: true,
                });
            }
        });
    }

    useEffect(() => {
        getMap()
    }, [])
    return (
        <div>

            <div id='container' style={{ height: '100vh' }}>

            </div>

            <div style={{ position: 'absolute', left: '0.5rem', top: '1rem' }}>
                <div style={{ padding: '0.5rem 1.5rem', borderRadius: '1rem', border: '1px solid', backgroundColor: '#fff' }} onClick={() => {
                    navigate('/app/campus')
                    localStorage.setItem('distance', distance);
                }}>
                    完成
                </div>
            </div>
            <div style={{position: 'absolute', right: '0.5rem', top: '1rem'}}>
                <Button round type='info' size='small' onClick={() => setVisible(true)}>
                    ···
                </Button>
            </div>
            <div style={{ position: 'absolute', bottom: '2rem', left: '1.2rem', height: '20rem', width: '90%', backgroundColor: '#fff', borderRadius: '7%' }}>
                <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '1rem' }}>
                    <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                        <h1 style={{ marginRight: '10px', fontSize: '3rem' }}>{distance / 1000}</h1><span style={{ fontSize: '1rem' }}>公里</span>
                    </div>
                    <div style={{ textAlign: 'center' }}>
                        <img style={{ width: '4rem', borderRadius: '50%' }} src="https://img0.baidu.com/it/u=123020064,1503144048&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1725382800&t=45c15365589765a7f295e1c89a513bb1" alt="" />
                        <p style={{ fontSize: '1rem' }}>天天健身</p>
                    </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '1rem' }}>
                    <div>
                        <ProgressCircle
                            percent={30}
                            style={{
                                '--size': '100px',
                                '--track-width': '4px',
                            }}
                        >
                            <div>3241</div>
                            <div>步</div>
                        </ProgressCircle>
                    </div>
                    <div style={{ textAlign: 'center' }}>
                        <h2>用时</h2>
                        <h1>{time}</h1>
                    </div>
                </div>
                <div style={{ textAlign: 'center' }}>
                    <input style={{ width: '90%', backgroundColor: 'rgb(0, 181, 120)', padding: '5px 10px', borderRadius: '5px', border: '0' }} type="button" value="开始回放" id="start" />
                </div>
            </div>
            <ShareSheet
                visible={visible}
                options={options}
                overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
                overlay = {true}
                title='立即分享给好友'
                onCancel={() => setVisible(false)}
                onSelect={(option, index) => {
                    console.log('option', option)
                    console.log('index', index)
                    setVisible(false)
                }}
            />
        </div>
    )
}
